<template>
    <!--分包商分子公司汇总详细-->
    <div class="page">
        <div class="top">
            <!-- <div class="left">
        <el-button size="mini" @click="exportss()">导出</el-button>
      </div>
      <div class="right"></div> -->
        </div>
        <div class="list">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                class="table"
                :max-height="$store.state.tableHeight"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                v-sortTable="{
                    tableData: tableData,
                    _this: this,
                    ref: 'multipleTable'
                }"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="50"> </el-table-column>
                <el-table-column label="序号" width="150"> </el-table-column>
                <el-table-column
                    prop="outerName"
                    label="分包商名称"
                    width="150"
                >
                </el-table-column>
                <el-table-column label="评价等级" width="500">
                    <el-table-column label="分（子）公司下一级单位" width="500">
                        <el-table-column
                            label="合同1"
                            width="100"
                            prop="contractOne"
                        >
                        </el-table-column>
                        <el-table-column
                            label="合同2"
                            width="100"
                            prop="contractTwo"
                        >
                        </el-table-column>
                        <el-table-column
                            label="合同3"
                            width="100"
                            prop="contractThree"
                        >
                        </el-table-column>
                        <el-table-column
                            label="合同N"
                            width="100"
                            prop="contractN"
                        >
                        </el-table-column>
                        <el-table-column label="合计" width="100" prop="total">
                        </el-table-column>
                        <el-table-column
                            label="评价合同数"
                            width="100"
                            prop="evaluateContract"
                        >
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column
                    prop="awardScore"
                    label="动态评价奖励分数"
                    width="150"
                >
                </el-table-column>
                <el-table-column
                    prop="evaluateScore"
                    label="评价分数"
                    width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="evaluateClass"
                    label="评价等级"
                    width="250"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="evaluateOpinion"
                    label="评价意见"
                    width="150"
                    show-overflow-tooltip
                >
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <ComPagination />
        </div>
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'

export default {
    components: {
        ComPagination
    },
    data () {
        return {
            tableData: [
                {
                    outerName: '', //分包商名称
                    contractOne: '', //合同1
                    contractTwo: '', //合同2
                    contractThree: '', //合同3
                    contractN: '', //合同N
                    total: '', //合计
                    evaluateContract: '', //评价合同数
                    awardScore: '', //动态评价奖励分数
                    evaluateScore: '', //评价分数
                    evaluateClass: '', //评价等级
                    evaluateOpinion: '' //评价意见
                }
            ]
        }
    },
    created () {
        this.getData()
    },
    mounted () {},
    methods: {
        //查询列表数据
        getData () {
            // this.$Ajax
            //     .httpPost({
            //         url: '',
            //         params: {
            //             creditcode: '',
            //             keyword: '',
            //             limit: 10,
            //             number: '',
            //             page: 1,
            //             subcontractorname: '',
            //         },
            //     })
            //     .then(res => {
            //         console.log(res)
            //     })
        },

        // toggleSelection (rows) {
        //     if (rows) {
        //         rows.forEach(row => {
        //             this.$refs.multipleTable.toggleRowSelection(row)
        //         })
        //     } else {
        //         this.$refs.multipleTable.clearSelection()
        //     }
        // },
        handleSelectionChange (val) {
            this.multipleSelection = val
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgb(239, 242, 246);
    border: 1px solid #ccc;
    border-radius: 5px;
    .top {
        height: 50px;
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        .left {
            flex: 1;
            ::v-deep.el-button--mini {
                margin-top: 10px;
                margin-left: 5px;
                color: #fff;
                background-color: rgb(122, 168, 24);
            }
        }
        .right {
            width: 300px;
        }
    }
    .list {
        flex: 1;
        margin-top: 10px;
    }
    .bottom {
        height: 50px;
        padding-bottom: 20px;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px; // 横向滚动条
        height: 10px; // 纵向滚动条
    }
    // 滚动条的滑块
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 5px;
    }
}
</style>
